<template>
  <div class="mycenter-box">
    <div class="mycenter-header">
      <div class="mycenter-header-body">
        <i class="iconfont">&#xe62a;</i>
        <!-- <van-icon name="setting-o" /> -->
        <div class="hb-img">
          <img src="../assets/img/people.png" alt="" />
        </div>
        <div class="hb-name">{{userInfo.phone}}</div>
        <div class="hb-vip">注册会员</div>
      </div>
    </div>

    <van-grid>
  <van-grid-item icon="orders-o" text="我的订单" />
  <van-grid-item icon="like-o" text="爱的留言" />
  <van-grid-item icon="coupon-o" text="优惠券" />
  <van-grid-item icon="vip-card-o" text="VIP会员" />
</van-grid>
    <!-- <ul class="mycenter-menu">
      <li>
        <i class="iconfont">&#xe897;</i>
        <p>我的订单</p>
      </li>
      <li>
        <i class="iconfont"> &#xe8ab;</i>
        <p>爱的留言</p>
      </li>
      <li>
        <i class="iconfont"> &#xe60b;</i>
        <p>优惠券</p>
      </li>
      <li>
        <i class="iconfont"> &#xe6ba;</i>
        <p>VIP会员</p>
      </li>
    </ul> -->
    <ul class="line-list">
      <li class="ddl">
        <span class="label">礼品卡</span
        ><input
          type="text"
          readonly="readonly"
          placeholder="添加礼品卡"
          class="txt"
        />
        <img src="../assets/img/next.png" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo:state=>state.user.userInfo
    }) 
  },
};
</script>

<style >
@import url("../assets/css/center.css");
@import url("../assets/font/iconfont.css");
</style>